import React from 'react';
import MainUI from '../../components/layout/MainUI';
import {connect} from 'dva';
import {
  Breadcrumb,
  Button,
  Col,
  Form,
  Input,
  Row,
  Icon,
  Card,
  message,
  Popconfirm,
  InputNumber
} from 'antd';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 16},
};

class Charge extends React.Component {

  state = {
    amount: 0,
  };
  search = () => {
    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (errors) {

      } else {
        this.props.dispatch({
          type: 'charge/e_getCustomer',
          payload: values
        });
        const state = this.state;
        state.amount = 0.00;
        this.setState(state);
      }
    });
  };

  handleReset = () => {
    this.props.form.resetFields();
  };

  render() {

    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>功能管理</Breadcrumb.Item>
          <Breadcrumb.Item> 门店管理</Breadcrumb.Item>
          <Breadcrumb.Item> 充值</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
          <Form className="ant-advanced-search-form">
            <Row>
              <Col span={4}>
                <FormItem {...formItemLayout} label='手机'>
                  {this.props.form.getFieldDecorator('cellphone', {
                    rules: [
                      {
                        message: "请输入手机号",
                        type: "string",
                        pattern: "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$"
                      },
                    ],
                  })(
                    <Input placeholder="手机号" suffix={<Icon type='phone'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={4}>
                <FormItem {...formItemLayout} label='会员卡号'>
                  {this.props.form.getFieldDecorator('customerNo')(
                    <Input placeholder="会员卡号" suffix={<Icon type='card'/>}/>
                  )}
                </FormItem>
              </Col>
              <Col span={4}>
                <Button type="primary" style={{marginLeft: 8,}} icon="retweet" onClick={() => {
                  this.search();
                }}>刷新</Button>
                <span className="ant-divider"/>
                <Button style={{marginTop: '3px'}} onClick={this.handleReset}>
                  清空
                </Button>
              </Col>
            </Row>
          </Form>
          {this.props.customer == undefined ? '' :
            <Row style={{
              marginTop: '20px',
              border: '1px solid #e9e9e9',
              padding: '15px',
              paddingTop: '40px',
              paddingBottom: '70px'
            }}>
              <Col span={4} >
                <Card style={{width: "100%"}} bodyStyle={{padding: 0}}>
                  <div className="custom-card">
                    <h1 style={{marginLeft: '10px', color: '#108ee9', padding: '5px'}}> {this.props.customer.name}</h1>
                  </div>
                  <div className="custom-image">
                    <img alt="头像" width="100%" src={this.props.customer.photo==null?'/img/photo.jpg':this.props.customer.photo}/>
                  </div>
                </Card>

              </Col>
              <Col span={5} offset={1}>
                <FormItem {...formItemLayout} label="手机号">
                  <span style={{fontSize: 28}}>
                  {
                    this.props.customer.cellphone
                  }
                  </span>
                </FormItem>
                <FormItem {...formItemLayout} label="会员类型">
                  <span style={{fontSize: 22}}>
                  {
                    this.props.customer.customerType == null ? '未知' : this.props.customer.customerType
                  }
                  </span>
                </FormItem>
                <FormItem {...formItemLayout} label="会员折扣">
                    <span style={{fontSize: 28, color: 'green'}}>
                            {this.props.customer.customerType2 == null ? '原价' : this.props.customer.customerType2.discount * 10 + '折'}
                  </span>
                </FormItem>
                <FormItem {...formItemLayout} label="会员卡号">
                  <span style={{fontSize: 28}}>
                  {
                    this.props.customer.customerNo
                  }
                  </span>
                </FormItem>
                <FormItem {...formItemLayout} label="性别">
                  {
                    this.props.customer.gender == 'Male' ? '男' : this.props.customer.gender == 'Female' ? '女' : '未知'
                  }
                </FormItem>

              </Col>
              <Col span={14}>
                <FormItem {...formItemLayout} label="余额">
                  <span style={{fontSize: 28, color: 'red'}}>
                  ￥{this.props.customer.amount}
                  </span>
                </FormItem>
                <FormItem {...formItemLayout} label={<span style={{fontSize: 20, color: "green"}}>充值金额</span>}>

                  {
                    <InputNumber placeholder="充值金额" onChange={(value) => {
                      this.state.amount = value;
                      this.setState(this.state);
                    }} style={{width: '200px'}} size="large" min={0} max={(100000 - this.props.customer.amount).toFixed(2)}
                                 precision={2} step={50}/>
                  }
                  <span style={{
                    color: 'red',
                    marginLeft: 5,
                    fontSize: 18
                  }}>金额范围:[ 0.00 - {(100000 - this.props.customer.amount).toFixed(2)}]</span>
                  <br/>
                  <span style={{fontSize: 28, color: 'green'}}>
                  ￥{this.state.amount}
                  </span>
                </FormItem>

                <Row>
                  <Popconfirm title={
                    <div>
                      <span style={{color: 'green', marginLeft: 5, fontSize: 18}}> 你确定要进行充值操作?         </span><br/>
                      <span
                        style={{color: 'red', marginLeft: 5, fontSize: 15}}>姓名: {this.props.customer.name}</span><br/>
                      <span style={{color: 'red', marginLeft: 5, fontSize: 15}}>金额(元): {this.state.amount} </span>
                    </div>

                  } onConfirm={() => {
                    if ((this.state.amount + this.props.customer.amount) > 100000) {
                      message.error(<span style={{color:'red',marginLeft:5,fontSize:18}}>输入的金额超过范围值</span>);
                      return;
                    }
                    ;
                    this.props.dispatch({
                      type: 'charge/e_charge',
                      payload: {
                        amount: this.state.amount,
                        customerId: this.props.customer.id,
                      }
                    });
                  }} okText="是" cancelText="否">

                    <Button type="primary" style={{
                      width: '250px',
                      marginTop: '120px',
                      marginLeft: 1,
                      height: 60,
                      fontSize: 24,
                    }}>充值</Button>
                  </Popconfirm>
                </Row>
              </Col>
            </Row>
          }
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    customer: state.charge.customer,
    admins: state.charge.admins,
  }
}

export default connect(mapStateToProps)(Form.create()(Charge));
